<template>
  <div class="cutter-scrap full-height bg-white page-content content relative-position padding-t-20">
    <yz-condition-filter
      v-model="params"
      @resetSearch="resetSearch"
      @onSubmit="searchData"
    >
      <div class="margin-r-20 margin-b-20">
        <span class="font-size-14" style="padding-right: 6px">选择月份:</span>
        <date-picker
          format="YYYY-MM"
          :editable="false"
          type="month" v-model="params.dateRange"
          range placeholder="请选择月份范围"
          style="width: 180px"
        />
      </div>
      <select-tooltip v-model="params.modelTypeCode"
                      isShowAll
                      :multiple='false'
                      :options="modelTypeCodeList"
                      msg="刀具类型"/>
      <yz-input inputType="input"
                placeholder="请输入刀具型号"
                title="刀具型号"
                class="input-width margin-r-20"
                v-model="params.model"/>
      <yz-input inputType="input"
                placeholder="请输入刀具识别码"
                title="刀具识别码"
                class="input-width margin-r-20"
                v-model="params.serialNumber"/>
      <select-tooltip v-model="params.scrapType"
                      isShowAll
                      :multiple='false'
                      :options="$getEnum(this.Enums.SCRAPTYPE)"
                      msg="报废方式"/>
    </yz-condition-filter>
    <div class="form-inline bottom">
      <export-btn
        :disable="!tableData.length"
        :exportFun="exportFun"
        :exportParams="exportParams"
        :exportName="getExportName()"/>
<!--          <q-btn class="btn margin-r-10"-->
<!--                 outline-->
<!--                 color="primary"-->
<!--                 label="导出Excel"-->
<!--                 :disable="!tableData.length || isDisable"-->
<!--                 @click="exportExcel"/>-->
    </div>
    <q-table :data="tableData"
             :columns="tableColumns"
             row-key="id"
             class="myTable scroll"
             :pagination.sync="pagination"
             :hide-bottom="tableData.length !== 0"
             no-data-label="暂无数据"
             :loading="isTableLoading"
             color="primary">
      <template v-slot:header-cell-scrapDate="props">
        <q-th :props="props"
              class="sortable"
              :class="[sortBy == 'scrapDate' ? 'sorted' : '','sort-' +value]"
              @click="sortable('scrapDate')">
          {{ props.col.label }}
          <q-icon name="arrow_upward"
                  size="16px"
                  class="q-table__sort-icon" />
        </q-th>
      </template>
      <template v-slot:bottom-row>
        <total-row :data="totalRow" v-if="tableData.length" :showSumLabel="false"/>
      </template>
    </q-table>
    <yz-pagination v-model="pagination" @onSearch="getList"/>
<!--    <pagination v-model="pagination.page"-->
<!--                :page-size="pagination.rowsPerPage"-->
<!--                :total="pagination.rowsNumber"-->
<!--                @changePageSize="onPageSizeChange"-->
<!--                @changePage="onPageChange"-->
<!--                style="margin-bottom: 20px" />-->
  </div>
</template>

<script>
import _ from 'lodash'
import moment from 'moment'
import TotalRow from './components/total-row'
import cutterScrap from 'src/boot/statistics/cutter-report'
import { getMapByGroup } from 'src/boot/cutter/dictionary'

export default {
  name: 'cutter-scrap',
  components: {
    TotalRow
  },
  data () {
    return {
      tableData: [],
      isDisable: false, // 导出按钮禁用
      params: {
        dateRange: [null, null],
        serialNumber: '',
        model: '',
        scrapType: 'all',
        modelTypeCode: 'all'
      },
      modelTypeCodeList: [],
      exportFun: cutterScrap.exportScrapList,
      tableColumns: [
        { name: 'serialNumber', label: '刀具识别码', field: 'serialNumber', align: 'left' },
        { name: 'model', label: '刀具型号', field: 'model', align: 'left' },
        { name: 'modelName', label: '刀具名称', field: 'modelName', align: 'left' },
        { name: 'modelTypeName', label: '刀具类型', field: 'modelTypeName', align: 'left' },
        { name: 'modelSpec', label: '刀具规格', field: 'modelSpec', align: 'left' },
        { name: 'blades', label: '刃数', field: 'blades', align: 'left' },
        { name: 'bladesLength', label: '刃长', field: 'bladesLength', align: 'left' },
        { name: 'unitName', label: '单位', field: 'unitName', align: 'left' },
        { name: 'supplier', label: '刀具供应商', field: 'supplier', align: 'left' },
        { name: 'price', label: '刀具单价', field: 'price', align: 'left' },
        { name: 'scrapTypeName', label: '报废方式', field: 'scrapTypeName', align: 'left' },
        { name: 'reason', label: '报废原因', field: 'reason', align: 'left' },
        { name: 'operatorName', label: '操作人', field: 'operatorName', align: 'left' },
        { name: 'scrapDate', label: '报废时间', field: 'scrapDate', align: 'left' }
      ],
      exportParams: {}, // 请求数据
      // 表格分页配置
      pagination: {
        pageNum: 1, // 当前页码
        pageSize: 15, // 每页条数
        rowsNumber: 0 // 总条数
      },
      // 排序字段
      sortBy: '',
      // 排序（正序/倒序）
      value: '',
      // 表格正在加载
      isTableLoading: false,
      totalRow: [
        {
          label: '合计报废数',
          value: ''
        },
        {
          label: '合计单价',
          value: ''
        }
      ]
    }
  },
  created () {
    this.getCutterType()
    this.getList()
  },
  methods: {
    // 获取列表
    getList () {
      this.isTableLoading = true
      const params = {}
      !_.isEmpty(this.params.serialNumber) && (params['serialNumber'] = this.params.serialNumber)
      !_.isEmpty(this.params.model) && (params['model'] = this.params.model)
      this.params.scrapType !== 'all' && (params['scrapType'] = this.params.scrapType)
      this.params.modelTypeCode !== 'all' && (params['modelTypeCode'] = this.params.modelTypeCode)
      !_.isNil(this.params.dateRange[0]) && (params['startDate'] = moment(this.params.dateRange[0]).startOf('month').format('YYYY-MM-DD'))
      !_.isNil(this.params.dateRange[1]) && (params['endDate'] = moment(this.params.dateRange[1]).endOf('month').format('YYYY-MM-DD'))
      !_.isEmpty(this.value) && (params['orderBy'] = this.value === 'asc' ? 'scrapDate' : 'scrapDate desc')

      this.exportParams = _.cloneDeep(params)
      params['pageNum'] = this.pagination.pageNum
      params['pageSize'] = this.pagination.pageSize
      cutterScrap.getScrapList(params).then(res => {
        if (res.list.length) {
          res.list.forEach(item => {
            item.bladesLength = this.$utils.label(item.bladesLength, '--')
            item.scrapDate = moment(item.scrapDate).format('YYYY-MM-DD HH:mm:ss')
          })
        }
        this.tableData = res.list
        this.totalRow[0].value = Number(res.total || 0).toLocaleString()
        this.totalRow[1].value = res.totalPrice || 0
        this.pagination.rowsNumber = res.total

        this.isTableLoading = false
      }).catch(res => {
        this.isTableLoading = false
      })
    },
    getCutterType () {
      getMapByGroup().then(res => {
        this.modelTypeCodeList = res.toolTypeSOptions
      })
    },
    /**
     * 重置查询条件
     */
    resetSearch () {
      this.params = {
        dateRange: [null, null],
        serialNumber: '',
        model: '',
        scrapType: 'all',
        modelTypeCode: 'all'
      }
    },
    // 搜索
    searchData () {
      if (this.params.dateRange && Math.abs(moment(this.params.dateRange[0]).diff(moment(this.params.dateRange[1]), 'months')) > 24) {
        this.$q.dialog({
          title: `<p class="dialog-notice-title"><i class="iconfont icontubiao-28"></i>所选月范围不可超出24月</p>`,
          html: true,
          ok: {
            unelevated: true,
            label: '确认'
          }
        })
        return false
      }
      // 查询
      this.pagination.page = 1
      this.getList()
    },
    // 表格排序
    sortable (type) {
      this.tableData = []
      if (this.sortBy === type) {
        if (this.value) {
          this.value = this.value === 'asc' ? 'desc' : 'asc'
        } else {
          this.value = 'asc'
        }
      } else {
        this.sortBy = type
        this.value = 'asc'
      }
      this.pagination.page = 1
      this.getList()
    },
    // 获取导出报表名称
    getExportName () {
      let name = '刀具报废记录'
      !_.isNil(this.exportParams.startDate) && (name += `_${moment(this.exportParams.startDate).format('YYYY-MM')}`)
      !_.isNil(this.exportParams.endDate) && (name += `_${moment(this.exportParams.endDate).format('YYYY-MM')}`)
      name += '.xls'
      return name
    },
    /**
     * on 分页组件的每页条数发生改变
     * @param val 每页条数
     */
    onPageSizeChange: function (val, page) {
      this.pagination.rowsPerPage = val
      page && (this.pagination.page = page)
      this.getList()
    },

    /**
     * on 分页组件的页码发生改变
     * @param val 页码
     */
    onPageChange: function (val) {
      this.pagination.page = val
      this.getList()
    }
  }
}
</script>

<style scoped lang="stylus">

</style>
